
<script setup lang="ts">
import { isFirstPage } from '@/utils';
import { onLoad, onShow } from '@dcloudio/uni-app';
const getVal = (val: string | number) => typeof val === 'number' ? val + 'px' : val;
const statusBarHeight = ref('20px');
statusBarHeight.value = uni.getWindowInfo().statusBarHeight + 'px';

/**
 * @description 导航栏组件，主要用于头部导航
 * @property {String} title 标题文字
 * @property {String} border 导航栏底部边框
 * @property {String} leftText 左侧按钮文本
 * @property {String} rightText 右侧按钮文本
 * @property {String} leftIcon 左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
 * @property {String} rightIcon 右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
 * @property {Boolean} leftEvent 是否默认点击事件
 * @property {String} color 图标和文字颜色
 * @property {String} background 导航栏背景颜色
 * @event {Function} clickLeft 左侧按钮点击时触发
 * @event {Function} clickRight 右侧按钮点击时触发
 * @event {Function} clickTitle 中间标题点击时触发
 */
const props = defineProps({
	title: {
		type: String,
		default: ''
	},
	border: {
		type: Boolean,
		default: false
	},
	leftText: {
		type: String,
		default: ''
	},
	rightText: {
		type: String,
		default: ''
	},
	leftIcon: {
		type: String,
		default: ''
	},
  leftIconStyle: {
    type: Object,
    default: () => ({})
  },
	showBack: {
		type: Boolean,
		default: true
	},
	rightIcon: {
		type: String,
		default: ''
	},
	leftEvent: {
		type: Boolean,
		default: true
	},
	color: {
		type: String,
		default: "#333"
	},
	opacity: {
		type: Number,
		default: 1
	},
	background: {
		type: String,
		default: '#fff'
	},
	height: {
		type: Number,
		default: 44
	},
	leftWidth: {
		type: Number,
		default: 60
	},
	rightWidth: {
		type: Number,
		default: 60
	},
	position: {
		type: String,
		default: 'fixed'
	},
	clickLeft: {
		type: Function
	},
	clickRight: {
		type: Function
	},
	clickTitle: {
		type: Function
	}
});

const emit = defineEmits(['clickLeft', 'clickRight', 'clickTitle']);

const leftIconWidth = computed(() => {
	return getVal(props.leftWidth);
})

function onClickLeft() {
	emit("clickLeft");
	if (props.leftEvent) {
		if (isFirstPage()) {
			uni.switchTab({
				url: '/pages/index/index'
			})
		} else {
			uni.navigateBack();
		}
		uni.$emit('refresh', {refresh: true});
	}
}
function onClickRight() {
	emit("clickRight");
}
function onClickTitle() {
	emit("clickTitle");
}
onShow(() => {
  // 兼容横屏转竖屏时，获取不到状态栏高度
  setTimeout(() => {
    statusBarHeight.value = uni.getWindowInfo().statusBarHeight + 'px';
  }, 100);
})
</script>

<template>
	<div class="page-head" :style="{ opacity: opacity }">
		<div class="navbar__content" :style="{ 'background': background, position: position }">
			<div :style="{ height: statusBarHeight }" class="status-bar"></div>
      <div :style="{ color: props.color }" :class="['navbar__header', { 'hairline-bottom' : props.border }]">
        <div class="navbar__header-btns flex">
          <div @click="onClickLeft" class="navbar__header-btns-left" hover-class="none" :style="{'min-width': leftIconWidth }">
            <slot name="left">
              <image v-if="leftIcon" class="back" :style="leftIconStyle" :src="leftIcon" />
              <image v-if="showBack" class="back" src="/static/navbar-back2x.png" />
              <div class="page-head-btn-text" v-if="leftText">{{ leftText }}</div>
            </slot>
          </div>
          <div>
            <slot name="leftIcon"></slot>
          </div>
        </div>

				<div class="navbar__header-container" @click="onClickTitle">
					<slot>
						<div class="navbar__header-container-inner ellipsis" v-if="title">{{ title }}</div>
					</slot>
				</div>
				<div @click="onClickRight" class="navbar__header-btns navbar__header-btns-right">
					<slot name="right">
						<div v-if="rightIcon">
							<image class="right-icon" :src="rightIcon" />
						</div>
						<div class="page-head-btn-text nav-bar-right-text" v-if="rightText">{{ rightText }}</div>
					</slot>
				</div>
			</div>
		</div>
		<div>
			<div :style="{ height: statusBarHeight }" class="status-bar"></div>
			<div class="navbar__placeholder-div"></div>
		</div>
	</div>
</template>

<style lang="scss">
.page-head {
	position: sticky;
	z-index: 2000;
	.navbar__content {
		z-index: 91;
		width: 100%;
		top: 0;
		left: 0;
		right: 0;
		border-bottom-color: #333;
		.status-bar {
			height: 20px;
		}
		.nav-bar-right-text {
			font-size: 15px;
			color: #333;
		}
		.right-icon {
			width: 24px;
			height: 24px;
		}
		.page-head-btn-text {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			line-height: 15px;
			color: #333;
			font-size: 15px;
		}

		.navbar__header {
			height: 44px;
			font-size: 12px;
			.back {
				width: 24px;
				height: 24px;
			}
		}
    .hairline-bottom {
      position: relative;
			border-bottom: 1rpx solid #ededed;
    }

		.navbar__header-btns {
			overflow: hidden;
			display: flex;
			flex-wrap: nowrap;
			flex-direction: row;
			min-width: 60px;
			align-items: center;
			cursor: pointer;
			position: absolute;
			bottom: 0;
			height: 44px;
			z-index: 89;
			padding: 0 10px 0 0;
			-webkit-tap-highlight-color: transparent;
		}

		.navbar__header-btns-left {
			justify-content: flex-start;
			align-items: center;
			left: 0;
			padding-left: 12px;
		}

		.navbar__header-btns-right {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			right: 0;
			padding-right: 12px;
		}

		.navbar__header-container {
			padding: 0 200rpx;
			overflow: hidden;
			height: 44px;
		}

		.navbar__header-container-inner {
			overflow: hidden;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 18px;
			color: #252525;
			line-height: 44px;
			text-align: center;
			font-style: normal;
			text-transform: none;
      white-space: nowrap;
      text-overflow: ellipsis;
		}
	}
	.navbar__placeholder-div {
		height: 44px;
	}
}
</style>
